<template>
  <div class="line_chart_box"
       style="width: 600px;height:400px;"
  ></div>
</template>

<script>
//引入包
import * as echarts from 'echarts';

export default {
  name: 'LineChart',
  //父组件传子组件的数据
  props:{
    xData:{
      //接受父组件的数据类型
      type:Array,
      //默认传送过来的父组件值
      defaultS:[]
    },
    yData:{
      //接受父组件的数据类型
      type:Array,
      //默认传送过来的父组件值
      defaultS: []
    }
  },
  //数据
  data() {
    return {
      // 折线图容器
      myChart: {},
      // 折线图配置
      option: {},
    }
  },
  //生命周期
  mounted() {
    this.myChart = echarts.init(document.querySelector('.line_chart_box'));
    //折线图配置
    this.option = {
      xAxis: {
        //x轴类型
        type: 'category',
        //x轴坐标数据(调用父组件传过来的xData)
        data: this.xData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          //y轴的数据((调用父组件传过来的yData))
          data: this.yData,
          type: 'line',
          //如果想折线顺滑，就设置为true，如果单纯要直线，就不设置或者为false
          smooth: false
        }
      ]
    };
    //折线图配置
    if (this.option && typeof this.option === 'object') {
      return this.myChart.setOption(this.option);
    }
  }
}
</script>